<template>
    <footer>
      <dl class="clearfix lists">
        <dd v-for="(item,index) in newlist"><span class="icon" :class=" 'icon'+ index"></span><span class="bottom">{{ item }}</span></dd>
        <dt @click="down" v-if="!messages.show"><span class="iconfont down" v-html="messages.downs"></span>{{ messages.dow }}</dt>
        <dt class="dt" @click="down" v-if="messages.show"><span class="iconfont down" v-html="messages.ups"></span>{{ messages.up }}</dt>
      </dl>
      <ul class="nav">
        <li><a href="#">登录</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">最近浏览</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
      <ul class="flexX bs">
        <li>触屏版</li>
        <li class="no">电脑版</li>
      </ul>
      <div class="copyright"><span>Qunar 京ICP备05021087</span><a class="qn_ml25" href="//touch.qunar.com/h5/feedback">意见反馈</a></div>
    </footer>
</template>

<script>
  // import $ from "jquery"
  export default {
      data(){
        return{
          "messages":{
            "show": false,
            "up": "收起",
            "ups": "&#xe642;",
            "dow": "更多",
            "downs": "&#xe643;"
          },
          "list":["机票", "酒店", "公寓", "团购", "火车票", "景点", "接送机", "度假", "攻略", "旅图", "车车", "当地人"],
          "lists": ["机票", "酒店", "公寓"],
        }
      },
      // mounted(){
      //   $(".no").css("color","#000")
      // },
      computed:{
        newlist(){
          if(this.messages.show){
            return this.list
          }else{
            return this.lists
          }
        }
      },
      methods:{
        down(){
          if(this.messages.show){
            this.messages.show = !this.messages.show;
          }else{
            this.messages.show = !this.messages.show;
          }
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl";
  footer
    font-size: .24rem
    .copyright
      color: #9e9e9e
      text-align: center
      font-size: .28rem
      padding: 10px
      a
        color: #9e9e9e
        height: .6rem
    .bs
      width: 30%
      margin: 0 auto
      font-size: .28rem
      line-height: .6rem
      .no
        color: #25a4bb
    .nav
      height: 39px
      border-bottom: 1px solid #cacaca;
      li
        float: left
        padding-left: 20px
        a
          color: #25a4bb
          font-size: 14px
          line-height: 39px
    .lists
      width: 80%
      margin: 0 auto
      dd
        float: left
        width: 23%
        color: #9e9e9e
        margin: .2rem 0 0 .1rem
        font-size: .24rem
        line-height: .36rem
        .bottom
          border-bottom: 1px solid #acacac
        .icon
          float: left
          width: .44rem
          height: .44rem
          background-image: url("http://www.jizhuangzhuang.com/mobiles/fitness/static/mock/img/footer/icon.png")
          background-repeat: no-repeat
          -webkit-background-size: 3.5rem 1rem
          background-size: 3.5rem 1rem
          margin-right: .1rem
        .icon1
          background-position: -.5rem 0
        .icon2
          background-position: -1rem 0
        .icon3
          background-position: -1.5rem 0
        .icon4
          background-position: -2rem 0
        .icon5
          background-position: -2.5rem 0
        .icon6
          background-position: -3rem 0
        .icon7
          background-position: 0 -.5rem
        .icon8
          background-position: -.5rem -.5rem
        .icon9
          background-position: -1rem -.5rem
        .icon10
          background-position: -1.5rem -.5rem
        .icon11
          background-position: -2rem -.5rem
        .icon12
          background-position: -2.5rem -.5rem
      .dt
        top: .1rem
        left: 75%
      dt
        float: left
        position: relative
        color: #9e9e9e
        padding-left: .3rem
        border-left: 1px solid #acacac
        top: .3rem
        font-size: .28em
        .down
          font-size: .24rem
</style>
